<template>
  <li>
    <a href="#">
      <i class="fa fa-home"></i>
      <span class="nav-label">{{li.lv1_label}}</span>
      <span class="fa arrow" @click.stop="toggle_ul"></span>
    </a>
    <ul class="nav nav-second-level collapse" v-bind:class="{ in : isActive }" ref="toggleul">
      <li v-for="lv2li in li.lv2lis" >
        <a class="J_menuItem" :href="lv2li.href" data-index="0">{{lv2li.lv2_label}}</a>
      </li>
    </ul>
  </li>
</template>
<script type="text/ecmascript-6">
    export default {
        props : ['li'],
        data () {
          return {
            toggleul : "",
            isActive : false
          }
        },
        mounted () {
          this.toggleul = this.$refs.toggleul;
        },
        methods : {
          toggle_ul : function () {
            this.isActive = !this.isActive;
          }
        }
    }
</script>

